<template>
  <dv-border-box-11 title="星云教育数据中台">
    <div class="content">
      <div class="content-top">
        <TopComponent />
      </div>
      <div class="content-bottom">
        <div class="left-component">
          <LeftComponent />
        </div>
        <div class="middle-component">
          <MiddleComponent />
        </div>
        <div class="right-component">
          <RightComponent />
        </div>
      </div>
    </div>
  </dv-border-box-11>
</template>

<script>
import TopComponent from "./Header/TopComponent.vue";
import LeftComponent from "./left/LeftComponent.vue";
import MiddleComponent from "./middle/MiddleComponent.vue";
import RightComponent from "./right/RightComponent.vue";

export default {
  name: "ContentComponent",
  components: {
    TopComponent,
    LeftComponent,
    MiddleComponent,
    RightComponent,
  },
};
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* background-color: #c9c8c7; */
}

.content-top {
  flex: 0.5;
  /* background-color: beige; */
}

.content-bottom {
  flex: 9;
  height: 100%;
  display: flex;
  margin: 15px;
  /* border-radius: 10px; */

  /* background: rgba(255, 255, 255, 0.1); */
  /* backdrop-filter: blur(25px); */
  /* border: 1px solid rgba(255, 255, 255, 0.5); */
  /* border-bottom: 1px solid rgba(255, 255, 255, 0.25); */
  /* border-left: 1px solid rgba(255, 255, 255, 0.25); */
}

.left-component {
  flex: 3;
}

.middle-component {
  flex: 5;
  margin: 15px;
}

.right-component {
  flex: 3;
}
</style>